<template>
	<view class="lists-box">
		<view class="lists-list">
			<view class="lists-image-box">
				<image class="lists-image" src="/static/位图(2).png" mode=""></image>
			</view>
			<p>咖啡机</p>
		</view>
		<view class="lists-list">
			<view class="lists-image-box">
				<image class="lists-image" src="/static/位图(2).png" mode=""></image>
			</view>
			<p>咖啡机</p>
		</view>
		<view class="lists-list">
			<view class="lists-image-box">
				<image class="lists-image" src="/static/位图(2).png" mode=""></image>
			</view>
			<p>咖啡机</p>
		</view>
		<view class="lists-list">
			<view class="lists-image-box">
				<image class="lists-image" src="/static/位图(2).png" mode=""></image>
			</view>
			<p>咖啡机</p>
		</view>
		<view class="lists-list">
			<view class="lists-image-box">
				<image class="lists-image" src="/static/位图(2).png" mode=""></image>
			</view>
			<p>咖啡机</p>
		</view>
	</view>
</template>

<script>
	export default {
		name:"science-list-custom",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.lists-box{
	display: flex;
	flex-wrap: wrap;
	background-color: pink;
}
.lists-list{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	background-color: aquamarine;
	width: 33.3%;
	height: 300rpx;
}
.lists-image-box{
	width: 100%;
	height: 180rpx;
	background-color: beige;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
}
.lists-image{
	width: 90rpx;
	height: 90rpx
}
</style>